<template>
  <div class="table">
    <el-table :data="blogData" style="width: 100%; height: 500px">
      <el-table-column
        fixed
        v-for="(item, index) in TableLabel"
        :key="item.prop"
        :label="item.label"
        :prop="item.prop"
        :width="item.width ? item.width : 125"
        :sortable="true"
      >
        <template v-if="item.content" #default="{ row }">
          <!-- 在这里添加您的定制化内容 -->
          <div class="custom-content">
            {{ row.blogContent.slice(0,10) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" min-width="180">
        <template #default="{ row }">
          <el-button type="danger" size="small" @click="handleDelete(row)"
            >删除</el-button
          >
          <el-button
            type="primary"
            icon="View"
            circle
            @click="openDrawer(row)"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-drawer
      v-model="drawerVisible"
      title="博客内容"
      :direction="direction"
      
    >
      <div class="drawer-content">
        <h2>{{ drawerTitle }}</h2>
        <p>{{ drawerContent }}</p>
      </div>
    </el-drawer>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="config.total"
      :page-size="config.pageSize"
      @current-change="changePage"
      class="pager"
    />
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, getCurrentInstance } from "vue";
const { proxy } = getCurrentInstance();
// 表格结构
const TableLabel = ref([
  {
    prop: "blogId",
    label: "博客id",
  },
  {
    prop: "blogTitle",
    label: "博客标题",
  },
  {
    prop: "blogContent",
    label: "博客内容",
    content: true,
  },
  {
    prop: "userId",
    label: "用户id",
  },
  {
    prop: "coverImage",
    label: "博客封面",
  },
  {
    prop: "createdAt",
    label: "创建时间",
  },
  {
    prop: "updatedAt",
    label: "修改时间",
  },
]);
// 博客内容
const blogData = ref([]);
// 页码切换
const config = reactive({
  total: 0,
  page: 1,
  pageSize: 20,
  blogId: "",
});
// 获取博客数据
const getBlogData = async (config) => {
  let res = await proxy.$api.getBlog(config);
  console.log(res);
  blogData.value = res.data.data.map((item) => {
    return item;
  });
  config.total = res.pageNum;
  console.log(blogData.value)
};
// 当页面加载时获取数据
onMounted(() => {
  getBlogData(config);
});
// 监听分页器的变化
const changePage = (page) => {
  console.log(page);
  config.page = page;
  getBlogData(config);
};
const handleDelete = async(row) => {
  ElMessageBox.confirm("确定删除吗？").then(async()=>{
  console.log(row);
  const blogId = row.blogId;
  let res = await proxy.$api.deleteBlog(blogId);
  console.log(res)
  if(res.code == 200){
    ElMessage({
      type:"success",
      message:"删除成功"
    })
    //刷新数据
    getBlogData()
  }
  }).catch(()=>{

  })
  
  
};
const drawerVisible = ref(false); // 抽屉的显示状态
const drawerTitle = ref(""); // 抽屉的标题
const drawerContent = ref(""); // 抽屉的内容
const direction = ref("rtl"); // 抽屉的方向
const openDrawer = (row) => {
  drawerVisible.value = true; // 打开抽屉
  drawerTitle.value = row.blogTitle; // 设置抽屉标题
  drawerContent.value = row.blogContent; // 设置抽屉内容
  console.log(drawerVisible.value);
};
</script>

<style lang="less" scoped>
.drawer-content {
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 4px;
}

.drawer-content h2 {
  font-size: 18px;
  margin-bottom: 10px;
  text-align: center;
}

.drawer-content p {
  font-size: 14px;
  line-height: 1.5;
  color: #606266;
  text-indent: 2em;
  margin-bottom: 10px;
}
</style>
